
<template>
  <div class="class">
    <div class="head">
      <i class="iconfont">&#xe62d;</i>
      <span>分类</span>
    </div>
    <div class="main">
      <div class="wrapper" ref="wrapper">
        <ul class="content">
          <!-- 分类列表 -->
          <li v-for="(item,classifyCode) in kindList.classifyBean" :key="classifyCode" @click="listClick(item.classifyCode)" :class="classifyCode===active?'active':'' ">{{item.classifyName}}</li>
        </ul>
      </div>
      <div class="detialList_box">
        <div class="shangtu" v-for="(item ,classifyCode) in kindList.classifyBean" v-show="item.classifyCode===active" :key="classifyCode" >
          <img :src="item.picPath" alt="">
        </div>
        <!-- 分类详情列表 -->
        <ul class="detialList clearfix" v-for="(item,index) in kindList.classifySonBean" v-show="index===active" :key="index">
          <li class="detial_title">{{item.classifyName}}</li>
          <ul class='pinpai'>
          <li v-for="(item,index) in item.detial" :key="index">
            <img :src="item.src" alt="">
            <p>{{item.text}}</p>
          </li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import { proall } from '@/utils/api'
import { kind } from '@/utils/api'
// import axios from '@/utils/request2'
// import BScroll from 'better-scroll'
export default {
  data () {
    return {
      message: 2
    }
  },
  created () {
    kind(this.message).then(data => {
      console.log(data.data[0])
      console.log(data.data[0].data)
      this.kindList = data.data[0]
      this.detialList = data.data[0].data
    })
  },
  methods: {
    listClick (classifyCode) {
      this.active = classifyCode
      this.detialtext = classifyCode
    }
  }
}
</script>
<style lang="scss" scoped>
.class {
  height: 100%;
  .head {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    height: .44rem;
    width: 100%;
    line-height: .44rem;
    text-align: center;
    color: #fff;
    background-color: #ff8c3c;
    i {
      position: absolute;
      left: .1rem;
    }
  }
  .main {
    display: flex;
    height: 100%;
    .wrapper {
      overflow: hidden;
      width: .8;
      height: 100%;
      background-color: #fff;
      .content {
        padding-top: .4rem;
        padding-bottom: .8rem;
        li {
          height: .4rem;
          width: .8rem;
          line-height: .4rem;
          padding-left: .1rem;
          text-align: left;
          background-color: #fff;
          border: 1px solid #efeff4;
        }
        .active {
          text-align: center;
          padding: .0225rem 0;
          background-color: #36bc7c;
          border-radius: 0 5rem 5rem 0;
          color: #fff;
        }
      }
    }
    .detialList_box {
      flex: 1;
      overflow: hidden;
      margin: 0 .08rem;
      background-color: #fff;
      .shangtu {
        display: block;
        width: 100%;
        padding: .05rem;
        margin-top: .52rem;
        text-align: center;
        img {
          display: block;
          width: 2.91rem;
          height: 1.08rem;
        }
      }
      .detialList {
        padding-bottom: .2rem;
        li {
          float: left;
          width: 33.3333333%;
          img {
            width: 100%;
          }
        }
        .detial_title{
        height: .4rem;
        width: 100%;
        line-height: .4rem;
        margin-top: .4rem;
        background-color: #efeff4;
      }
      }
    }
  }
}
</style>
